<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never">
      <el-row :gutter="20">
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" size="mini" @click="handleSearch()"
            >查询</el-button
          ></el-col
        >
      </el-row>
    </el-card>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      style="margin-top: 1%"
    >
       
      <el-table-column align="center" label="ID" width="60">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="费用类型" align="center" width="120">
        <template slot-scope="scope">
          <!-- 1 房租 2 物业 3 水费 4 电费  5 押金 6 停车 7 意向金额 8 其他费用 -->
          {{ scope.row.type==1?"房租":scope.row.type==2?"物业":scope.row.type==3?"水费":scope.row.type==4?"电费":scope.row.type==5?"押金":scope.row.type==6?"停车":scope.row.type==7?"意向金额":scope.row.type==8?"其他费用":'' }}
        </template>
      </el-table-column>
    
      
      <el-table-column label="支付流水号" align="center" width="160">
        <template slot-scope="scope">
          {{ scope.row.trxid }}
        </template>
      </el-table-column>
      <el-table-column label="系统订单号" align="center" width="80">
        <template slot-scope="scope">
          {{ scope.row.orderNo }}
        </template>
      </el-table-column>
      <el-table-column label="支付金额" align="center" width="80">
        <template slot-scope="scope">
          {{ scope.row.money }}
        </template>
      </el-table-column>
      <el-table-column label="租赁状态" width="100" align="center">
        <template slot-scope="scope">
          <!-- 支付渠道  1 通联  2 公对公转账 -->
          {{ scope.row.payChannel==1?'通联':scope.row.payChannel==2?'公对公转账':'其他' }}
        </template>
      </el-table-column>
 
      <el-table-column label="审核状态" width="100" align="center">
        <template slot-scope="scope">
          <!-- 审核状态(支付渠道为对公则有该字段)  1 审核中   2 审核完成  3 审核拒绝 -->
          {{ scope.row.auditType==1?'审核中':scope.row.auditType==2?'审核完成':'审核拒绝' }}
        </template>
      </el-table-column>
      

      <el-table-column label="计费时间" width="160" align="center">
        <template slot-scope="scope">
          <!-- 审核状态(支付渠道为对公则有该字段)  1 审核中   2 审核完成  3 审核拒绝 -->
          {{ scope.row.beginDate}} {{ scope.row.endDate}}
        </template>
      </el-table-column>
      

      <el-table-column label="退款金额" width="100" align="center">
        <template slot-scope="scope">
          <!-- 支付渠道  1 通联  2 公对公转账 -->
          {{ scope.row.refund }}
        </template>
      </el-table-column> 

      <el-table-column label="支付状态" width="100" align="center">
        <template slot-scope="scope">
          <!-- 状态 1 待支付 2 支付完成 3 支付超时  4 已退款 -->
          {{ scope.row.status==1?'待支付':scope.row.status==2?'支付完成':scope.row.status==3?'支付超时':'已退款' }}
        </template>
      </el-table-column> 

      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.creationTime }}  
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="handleDetails(scope.row.id)"
            >详情</el-button
          >
          <el-button type="success" size="mini" @click="handleAudit(scope.row.id)">审核通过</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="where.currentPage"
        :page-sizes="[10, 15, 20, 25, 30]"
        :page-size="where.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { orderList,findOrderAudit } from "@/api/order";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      list: [],
      listLoading: true,         
      where: {
        currentPage: 1,
        pageSize: 10,
        refundType: "",
      },
      total: 0,
      form: {},
    };
  },
  created() {
    this.fetchData(this.where);
  },
  methods: {
    fetchData(obj) {
      this.listLoading = true;
      orderList(obj)
        .then((response) => {
          console.log(response);
          this.listLoading = false;
          this.list = response.data.tableData;
          this.total = response.data.total;
          this.currentPage4 = response.data.currentPage;
          this.pageSize = response.data.pageSize;
        })
        .catch((error) => {
          console.log(error);
          this.listLoading = false;
        });
    },
    handleSizeChange(val) {
      this.where.pageSize = val;
      this.fetchData(this.where);
    },
    handleCurrentChange(val) {
      this.where.currentPage = val;
      this.fetchData(this.where);
    },
    handleDetails(id) {
      window.open(
        this.$router.resolve({ path: "/yuanqu/roomDetails", query: { id: id } })
          .href,
        "_blank"
      );
    },
    handleAudit(id){
      this.listLoading = true;
      findOrderAudit(id)
        .then((response) => {
          console.log(response);
          this.listLoading = false;          
        })
        .catch((error) => {
          console.log(error);
          this.listLoading = false;
        });
    },
    handleSearch() {
      this.fetchData(this.where);
    },
  },
};
</script>
